<template>
    <div class="page-wrapper" style="align-items: center;justify-content: center;display: flex;" v-if="isLoading">
        <span style="font-size: x-large;color: white;">加载中,请稍后....</span>
    </div>
    <div class="page-wrapper" align="center" v-else>
        <el-affix>
            <div style="min-height: 100px;display: flex;align-items: center;padding-left: 2%;overflow: hidden;">
                <v-btn variant="plain" @click="router.back()">
                    <v-icon icon="mdi-chevron-left" size="40" color="white"></v-icon>
                    <span style="color: white;font-size: large;">返回</span>
                </v-btn>
            </div>
        </el-affix>
        <div class="container">
            <div style="width: 70%;">
                <mavon-editor v-model="data.blog.content" :subfield="false" defaultOpen="preview" :toolbarsFlag="false"
                    style="min-height: 525px;">
                </mavon-editor>
                <div style="width: 100%;display: flex;justify-content: end;background-color: white;"
                    v-if="useUserStore().userId === data.blog.authorId">
                    <v-btn color="red" @click="deleteBlog">
                        <span>删除博客</span>
                        <v-icon icon="mdi-chevron-right" size="20"></v-icon>
                    </v-btn>
                </div>
            </div>
            <el-affix :offset="40">
                <div class="info" align="left">
                    <v-avatar size="64" @click="navigateToMain()" style="cursor: pointer;">
                        <v-img :src="data.authorBlogInfo.profile" cover v-if="data.authorBlogInfo.profile !== ''"></v-img>
                        <v-icon v-else icon="mdi-account-circle" size="64">
                        </v-icon>
                    </v-avatar>
                    <span style="margin-left: 2%;font-size: large;">{{ data.blog.author }}</span>
                    <div style="height: 10px;"><v-divider></v-divider></div>
                    <div style="display: flex;align-items: baseline;width: 100%;">
                        <div style="flex:1" align="center">
                            <div class="data">{{ data.authorBlogInfo.totalBrowse }}</div>
                            <div class="title">总访问量</div>
                        </div>
                        <v-divider vertical />
                        <div style="flex:1" align="center">
                            <div class="data">{{ data.authorBlogInfo.blogNumber }}</div>
                            <div class="title">博客数</div>
                        </div>
                        <v-divider vertical />
                        <div style="flex:1" align="center">
                            <div class="data">{{ data.authorBlogInfo.totalLike }}</div>
                            <div class="title">点赞数</div>
                        </div>
                    </div>
                    <div style="height: 10px;"><v-divider></v-divider></div>
                    <div style="margin-top: 5%;">
                        <div class="subtitle">
                            爱好/特长: {{ data.authorBlogInfo.specialty }}
                        </div>
                        <div class="subtitle">
                            个性签名:{{ data.authorBlogInfo.signature }}
                        </div>
                    </div>
                </div>
                <div class="comment" align="left">
                    <span style="padding-left: 2%;padding-top: 2%;font-weight: 600;">最新评论：</span>
                    <v-list height="200px" v-if="data.blog.comments.length != 0">
                        <v-list-item v-for="(comment, index) in data.blog.comments" :key="index" height="60px">
                            <template v-slot:title>
                                <span style="font-size: small;font-weight: 600;">
                                    {{ comment.name }}
                                </span>
                            </template>
                            <template v-slot:subtitle>
                                <span style="font-size: small;color: rgb(64, 64, 64);">
                                    {{ comment.comment }}
                                </span>
                            </template>
                            <template v-slot:prepend>
                                <v-avatar size="40">
                                    <v-img v-if="comment.profile != ''" :src="comment.profile" cover>
                                    </v-img>
                                    <v-icon v-else icon="mdi-account-circle" size="50">
                                    </v-icon>
                                </v-avatar>
                            </template>
                            <template v-slot:default>
                                <span
                                    style="width: 100%;display: flex;justify-content: end;color: gray;font-size: x-small;">
                                    {{ comment.time.split('T')[0] }}
                                </span>
                            </template>
                        </v-list-item>
                    </v-list>
                    <div style="height: 200px;display: flex;align-items: center;justify-content: center;" v-else>
                        <div style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
                            <v-img width="80px" height="100px" src="/nocomment.png" cover></v-img>
                            <div>评论区空空如也？！</div>
                        </div>
                    </div>
                    <div style="display: flex;width: 100%;padding-left: 5%;align-items: center;">
                        <v-icon icon="mdi-thumb-up" size="24" :color="data.blog.alreadyLiked ? 'red' : 'grey'"
                            :style="data.blog.selfPublish ? { cursor: 'pointer' } : {}"
                            @click="data.blog.alreadyLiked ? revokeLike() : like()"></v-icon>
                        <span style="font-size: 14px;margin-left: 3%;">{{ data.blog.like }}</span>
                        <div style="width: 10%;"></div>
                        <v-icon icon="mdi-comment" size="24" color="grey" style="cursor: pointer;"
                            @click="isCommenting = !isCommenting"></v-icon>
                        <span style="font-size: 14px;margin-left: 3%;">{{ data.blog.comments.length }}</span>
                    </div>
                    <span style="font-size:x-small;color: gray;padding-left: 5%">觉得不错?为这篇博客点个赞或发布一条友善的评论吧~</span>
                </div>
            </el-affix>
        </div>
    </div>
    <v-overlay v-model="isCommenting" style="align-items: center;justify-content: center;">
        <v-sheet width="600px" height="350" color="white" style="padding: 3%;" rounded>
            <span style="font-weight: 600;font-size: large;">发布评论:</span>
            <div style="height: 5%;"></div>
            <v-textarea variant="outlined" placeholder="发布一条友善的评论吧..." density="comfortable" v-model="comment">
            </v-textarea>
            <div style="width: 100%;display: flex;justify-content: end;margin-top: 50px;">
                <v-btn @click="makeComment()">
                    <span>发布</span>
                    <v-icon icon="mdi-chevron-right" size="20"></v-icon>
                </v-btn>
            </div>
        </v-sheet>
    </v-overlay>
</template>
<script lang="ts" setup>
import { GetBlog, GetPersonalBlogInfo, Like, RevokeLike, MakeComment, GetComment, RevokeBlog } from '@/controllers/blogController';
import type { BlogDetail, PersonalBlogInfo } from '@/models/blog';
import router from '@/router';
import { useUserStore } from '@/stores';
import { message, messageConfirm } from '@/utils/message';
import { onMounted } from 'vue';
import { reactive } from 'vue';
import { ref } from 'vue'
const { id } = defineProps(['id']);
let isLoading = ref(true)
let data = reactive({
    authorBlogInfo: {} as PersonalBlogInfo,
    blog: {} as BlogDetail,
})
let isCommenting = ref(false)
let comment = ref('')
onMounted(() => {
    init()
})
async function init() {
    try {
        data.blog = await GetBlog(id)
        data.authorBlogInfo = await GetPersonalBlogInfo(data.blog.authorId)
    }
    catch (error: any) {
        message(error.message, 'error')
    }
    finally {
        isLoading.value = false
    }
}
async function like() {
    if (data.blog.alreadyLiked) return
    try {
        await Like(id)
        data.blog.like++
        data.blog.alreadyLiked = true
    }
    catch (error: any) {
        message(error.message, 'error')
    }
}
async function revokeLike() {
    if (!data.blog.alreadyLiked) return
    try {
        await RevokeLike(id)
        data.blog.like--
        data.blog.alreadyLiked = false
    }
    catch (error: any) {
        message(error.message, 'error')
    }
}
async function makeComment() {
    if (comment.value === '') {
        message('评论内容不能为空!')
        return
    }
    try {
        await MakeComment(comment.value, id)
        data.blog.comments = await GetComment(id)
        message('发布评论成功', 'success')
        isCommenting.value = false
    }
    catch (error: any) {
        message(error.message, 'error')
    }
}
function deleteBlog() {
    messageConfirm('确认删除当前博客吗?').then(
        () => {
            RevokeBlog(id).then(
                () => {
                    message('删除成功', 'success')
                    setTimeout(() => {
                        router.push('/blog')
                    }, 1000)
                }
            ).catch(
                err => {
                    message(err.message, 'error')
                }
            )
        }
    ).catch(
        () => {
            return
        }
    )
}
function navigateToMain() {
    router.push({
        path: '/blog',
        query: {
            'uid': data.blog.authorId
        }
    })
}
</script>
<style scoped>
.page-wrapper {
    min-height: 100%;
    width: 100%;
    background-image: url("/star-bg.gif");
    background-repeat: repeat;
    background-size: auto;
    z-index: -1;
}

.container {
    width: 100%;
    border-radius: 10px;
    padding-left: 10%;
    display: flex;
    justify-content: center;
}

.info {
    width: 300px;
    background-color: white;
    border-radius: 10px;
    height: 225px;
    padding: 5%;
    margin-left: 10%;
}

.subtitle {
    color: rgb(64, 64, 64);
    font-size: small;
    margin-bottom: 0.1%;
}

.data {
    font-size: small;
    color: gray;
    margin-left: 1%;
}

.title {
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 10%;
}

.comment {
    width: 300px;
    background-color: white;
    border-radius: 10px;
    padding: 2%;
    margin-left: 10%;
    margin-top: 5%;
}
</style>